<template>
	<view class="daily_task">
		<view class="task_main">
			<view class="ill">
				<view class="title">
					<uni-icons v-if="currTask.iconType === 'uni'" :type="currTask.icon" size="18" color="#1952F8"></uni-icons>
                    <u-icon v-if="currTask.iconType === 'uView'" :name="currTask.icon" size="20"  color="#1952F8" class="arrow"></u-icon>
					<text>{{ currTask.name }}</text>
				</view>
				<view :class="[currTask.tip1Cls]">{{ currTask.tips1 }}</view>
				<view :class="[currTask.tip2Cls]"">{{ currTask.tips2 }}</view>
			</view>
			<view class="btn" @click="reflex(currTask.action)">{{ currTask.actionName }}</view>
		</view>
	</view>
</template>
<script>
export default {
	props: {
		hasSleep:Boolean,
	},
	data() {
		return {
			inviteTask: {
                iconType: "uView",
				icon: "calendar-fill",
				name: "邀请任务",
				tips1: "每邀请1名好友注册可绑定后续权益",
				tips2: "每邀请1名好友购买可获得现金分成及元气返现",
				action: "toInvite",
				actionName: "邀请好友",
				close: "hidden",
				tip1Cls: "tip2",
				tip2Cls: "tip2",
			},

			sleepTask: {
                iconType: "uni",
				icon: "calendar-filled",
				name: "每日任务",
				tips1: "完成每日任务领取奖励",
				tips2: "(根据睡眠等健康数据同步情况按比例发放)",
				action: "toReward",
				actionName: "领取奖励",
				close: "",
				tip1Cls: "tip1",
				tip2Cls: "tip2",
			},
		};
	},

	computed: {
		currTask() {
			if (this.hasSleep) {
				return this.sleepTask;
			}
			return this.inviteTask;
		},
	},

	methods: {
		reflex(fnName, ...params) {
			const fn = this[fnName];
			if (typeof fn === "function") fn(...params);
		},

		toInvite() {
            uni.navigateTo({
				url: "/pages/ring/invite",
			});
        },

		toReward() {
            this.$emit('report')
        },
	},
};
</script>
<style lang="scss" scoped>
.daily_task {
	padding: 30rpx;
	width: calc(100% - 64rpx);
	height: 168rpx;
	background-color: rgba($color: #ffffff, $alpha: 0.4);
	border-radius: 16rpx;
	margin: 30rpx auto;

	.task_main {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.ill {
			.title {
				display: flex;
				color: #1952f8;
				font-size: 32rpx;
				font-weight: bold;
                margin-bottom: 12rpx;

                text {
                    margin-left: 4rpx;
                }
			}

			.tip1,
			.tip2 {
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
                margin-top: 6rpx;
			}

            .tip1 {
                font-size: 24rpx;
            }
		}

		.btn {
			width: 220rpx;
			height: 68rpx;
			line-height: 68rpx;
			background-color: #2359f8;
			color: white;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			// letter-spacing: 8rpx;
			border-radius: 34rpx;
		}
	}
}
</style>
